import React, {Component} from 'react';
import style from './PostDetailsPage.module.less'
// import MdEditor from 'md-editor-rt';
import Editor from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
// import sanitizeHtml from 'sanitize-html';
import axios from 'axios'
import demo from '../../../../assets/image/demo.jpg'
import {Button, Input} from "antd";
import {LikeOutlined, RightOutlined} from "@ant-design/icons";
import {getFourmRequest} from "@requests/Forum";
import Loading from "@utils/Loading";
class PostDetailsPage extends Component {
    state = {
        text:null,
        data:null
    }
    componentDidMount() {
        const id = this.props.location.state
        // console.log(id)
        this.getFourm(id)
    }
    getFourm= async(id)=>{
        if(id === undefined){
            this.props.history.push('/Forum')
            return
        }
        // console.log(id)
        const response = await getFourmRequest(id)
        if(response.code === '200'){
            console.log(response.results[0])
            this.setState({
                data:response.results[0],
                text:response.results[0].text
            })
        }
    }
    render() {
        const { TextArea } = Input;
        if(this.state.data === null) return (<Loading />)
        // console.log()
        if(this.state.text === null) return (<Loading />)
        const data = this.state.data;
        return (
            <div className='center' style={{ display: "flex", justifyContent: "space-between",marginTop: "1%"}}>
                <div className={style.left}>
                    <div className = {style.top}>
                        <h1>{data.title}</h1>
                        <p className={style.time}>{data.createDate}</p>
                        <p className={style.fenge}>--------------------------我是分割线--------------------------</p>
                    </div>
                    <div className = {style.center}>
                        <div className = {style.text}>
                            {/*onUploadImg={this.onUploadImg}*/}
                            {/*sanitize={(html) => sanitizeHtml(html)}*/}
                            {/*    <MdEditor modelValue={this.state.text} onChange={this.updateText}  />*/}
                            <Editor editorId="article-content"  modelValue={this.state.text} previewOnly />
                        </div>
                        <p className={style.fenge} style={{paddingBottom:'8%'}}>--------------------------end--------------------------</p>
                    </div>
                    <div className = {style.bottom}>
                        <div className={style.comment}>
                            <p>请开始你的表演~~</p>
                            <TextArea
                                showCount
                                maxLength={100}
                                style={{
                                    height: 120,
                                    resize: "none",
                                    // border: 0,
                                    width: "90%",
                                    // display: "block",
                                    margin: "0 5%",
                                }}
                                // onChange={onChange}
                                placeholder="这不来评论一下么？"
                            />
                            <Button
                                type="primary"
                                style={{
                                    display: "block",
                                    margin: "1% auto",
                                }}
                            >
                                发表评论
                            </Button>
                        </div>
                        <div className={style.Clist}>
                            <ul>
                                <li>
                                    <div className={style.top}>
                                        <img src={demo} alt="" />
                                        <p>name</p>
                                    </div>
                                    <div className={style.center}>
                                        评论内容，评论内容，评论内容
                                    </div>
                                    <div className={style.bottom}>
                                        <div>地址：山东</div>
                                        <div>
                                            <LikeOutlined className={style.dizan} />
                                            &nbsp;1
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div className={style.top}>
                                        <img src={demo} alt="" />
                                        <p>name</p>
                                    </div>
                                    <div className={style.center}>
                                        评论内容，评论内容，评论内容
                                    </div>
                                    <div className={style.bottom}>
                                        <div>地址：山东</div>
                                        <div>
                                            <LikeOutlined className={style.dizan} />
                                            &nbsp;1
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className={style.right}>
                    <div className={style.body_author}>
                        <img src={process.env.REACT_APP_BASE_URL+data.userImg} alt="" />
                        <Button ghost className={style.GuanZhu}>
                            关注 +
                        </Button>
                        <div>
                            <p>粉丝：0</p>
                            <p>发帖：3</p>
                        </div>
                    </div>
                    <div className={style.body_recommend}>
                        <div className={style.body_Popular}>
                            <p className={style.reMeng}>
                                <span>最近热门</span>
                                <span>
                      更多
                      <RightOutlined />
                    </span>
                            </p>
                            <ul>
                                <li>
                                    <div className={style.one}>
                                        <img src={demo} alt="" />
                                    </div>
                                    <div className={style.two}>
                                        <p>曲谱曲谱曲谱</p>
                                    </div>
                                </li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default PostDetailsPage;